<template>
	<view>
		<comHeader :config="navConfig"/>
		<view class="table">
			<view class="order-info-line">
				<text class="order-label">邮箱账号</text>
				<input type="text" placeholder="请填写邮箱账号" placeholder-style="color:#999999;" class="order-input">
			</view>
			<view class="order-info-line">
				<text class="order-label">邮箱安全码</text>
				<input type="text" placeholder="填写安全码" placeholder-style="color:#999999;" class="order-input">
			</view>
		</view>
		<view class="mintuesBox">
			<button 
			class="minuts"
			size="mini"
			 @tap="TimeBtn" 
			 :disabled="disabled"
			 :class="[disabled ? '':'blueMintues']">{{countdown}}<text v-show="timeStatus">秒后重发</text></button>
		 </view>
		 <button class="btn"><text>确认绑定</text></button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				isActive1:false,
				isActive2:false,
				isActive3:false,
				isActive4:false,
				isShowStep:'',//传递给父组件
				countdown:'获取安全码',
				timeStatus:false,
				disabled:false ,//重新获取按钮是否开启
				
				navConfig:{
					isFixed:false, //是否absolute布局
					left:{
						
						isShowLeft:true,
						leftGobackColor:'black', //左边返回icon颜色
					},
					mid:{
						isShowMid:true,
						text:'绑定邮箱'
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
			}
			
		},
		methods:{
			logNextPsd(){
				this.isShowStep = 'regPsd';
				this.$emit('sendShowPsd',this.isShowStep)
			},
			focusClass1(e){
				if(e.detail.value.length !== 0){
					this.isActive1 = true
				}else{
					this.isActive1 = false
				}
			},
			focusClass2(e){
				if(e.detail.value.length !== 0){
					this.isActive2 = true
				}else{
					this.isActive2 = false
				}
			},
			focusClass3(e){
				if(e.detail.value.length !== 0){
					this.isActive3 = true
				}else{
					this.isActive3 = false
				}
			},
			focusClass4(e){
				if(e.detail.value.length !== 0){
					this.isActive4 = true
				}else{
					this.isActive4 = false
				}
			},
			// 验证码
			TimeBtn(){
				this.countdown = 60;
				this.timeStatus = true;
				let timer = setInterval(()=>{
					--this.countdown
				},1000)
				setTimeout(()=>{
					clearInterval(timer);
					this.timeStatus = false;
					this.countdown = '重新获取';
				},60000);
				if(this.countdown == '重新获取'){
					this.disabled = false
				}else{
					this.disabled = true
				}
			}
		}
	}
</script>

<style>
	.table{
		width: 690upx;
		height: 188upx;
		border-radius: 15upx;
		background: rgba(255,255,255,1);
		box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
		margin-left: 28upx;
		margin-top: 52upx;
	}
	.order-info-line{
		width: 614upx;
		margin-top: 40upx;
		display: flex;
		flex-direction: row;
	}
	.order-label{
		width: 175upx;
		display: block;
		font-size: 28upx;
		height: 28upx;
		padding-top: 22upx;
		margin-left: 56upx;
		
	}
	.order-input{
		height: 28upx;
		width: 400upx;
		font-size: 28upx;
		padding-top: 22upx;
		margin-left: 80upx;
	}
	
	.mintuesBox{
		width:100%;
		clear: both;
		overflow: hidden;
		
	}
	.minuts{
		margin-right: 46upx;
		margin-top: 44upx;
		font-size:28upx;
		color:#7B91FE;
		float: right;
		border: 1upx solid #7B91FE;
		background: #FFFFFF;
		border-radius: 20upx;
	}
	.minuts:after{
		border:none !important;
	}
	.blueMintues{
		color: #5696FF !important;
	}
	
	.btn{
		width: 612upx;
		height: 80upx;
		background: rgba(87,115,254,0.79);
		margin-top: 258upx;
		border-radius: 50upx;
	}
	.btn text{
		margin: auto;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(255,254,254,1);
	}
	
</style>
